<template>
  <div>
    <v-header>
      <v-back></v-back>
    </v-header>

    <van-button @click="request1" type="primary"
      >1、axios发送get请求无参</van-button
    >
    <!-- 购物车 -->
    <hr />
    <van-button @click="request2" type="primary"
      >2、axios发送get请求有参</van-button
    >
    <hr />
    <van-button @click="request3" type="primary"
      >3、axios发送post请求无参</van-button
    >
    <hr />
    <van-button @click="request4" type="primary"
      >4、axios发送post请求有参</van-button
    >
    <hr />
    <van-button @click="request5" type="primary"
      >5、执行多个并发请求</van-button
    >
    <hr />
    <van-button @click="request6" type="primary">6、全局引入</van-button>
    <hr />
    <van-button @click="request7" type="primary">7、axios()</van-button>
    <hr />
    <van-button @click="request8" type="primary">8、全局默认设置</van-button>
  </div>
</template>

<script>
// ============= 拦截器===========
//1. 响应拦截
axios.interceptors.response.use((res) => {
  //console.log(res,'响应拦截')
  console.group("-------------------------");
  console.log("本次请求地址为:", res.config.url);
  console.log("本次结果为：", res.data);
  console.groupEnd("-----");
  return res; //否则后面拿不到结果
});

//2. 请求拦截，可以统一设置请求的参数，比如统一在headers中加token
//假设后端的所有接口要求 前端必须通过headers传递一个aa参数为123
axios.interceptors.request.use((config) => {
  console.log(config,'请求拦截')
  //config.headers.aa = 1234
  config.headers.authorization = "tokenstring"; //登录成功后设置了token字符串到locastorage，从缓存中获取的
  return config; //必须return，否则请求信息不会发送给服务器
});
// ===============================

import axios from "axios";
export default {
  methods: {
    // 1、axios发送get请求无参
    async request1() {
      let res = await axios.get("http://localhost:3000/api/getcates");
      console.log(res);
    },
    // 2、axios发送get请求有参
    async request2() {
      /* let res = await axios.get('http://localhost:3000/api/getgoodlist?cateid=2');
      console.log(res); */
      let res = await axios.get("http://localhost:3000/api/getgoodlist", {
        params: {
          cateid: 2,
        },
      });
      console.log(res);
    },
    // 3、axios发送post请求无参
    async request3() {
      let res = await axios.post("http://localhost:3000/api/getgoodlist");
      console.log(res);
    },
    // 4、axios发送post请求有参
    async request4() {
      let res = await axios.post("http://localhost:3000/api/login", {
        phone: "13311112222",
        password: "666",
      });
      console.log(res);
    },
    // 5执行多个并发请求
    async request5() {
      function getcate() {
        return axios.get("http://localhost:3000/api/getcate");
      }

      function getcates() {
        return axios.get("http://localhost:3000/api/getcate");
      }
      let res = await axios.all([getcate(), getcates()]);
      console.log(res);
    },
    // 6、全局引入
    async request6() {
      let res = await this.$axios.post("http://localhost:3000/api/login", {
        phone: "13311112222",
        password: "666",
      });
      console.log(6, res);
    },
    // 7、axios()
    async request7() {
      let res = await this.$axios({
        url: "http://localhost:3000/api/login",
        method: "post",
        data: {
          phone: "13311112222",
          password: "666",
        },
      });
      console.log(7, res);
    },
    // 8、// 全局默认设置
    // axios.defaults.baseURL = 'http://localhost:3000';
    async request8() {
      let res = await this.$axios({
        url: "/api/login",
        method: "post",
        data: {
          phone: "13311112222",
          password: "666",
        },
      });
      console.log(8, res);
    },
  },
};
</script>

<style>
</style>